
<!--
All rights Reserved, Designed By www.youyacao.com
@Description:登录页面
@author:成都市一颗优雅草科技有限公司
@version V4.2
注意：本前端源码遵循 MIT开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584
开源gitee地址：https://gitee.com/youyacao/songshu-video-page
 -->


<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">松鼠短视频系统-后台管理V4.2.7</div>
      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="username">
          <el-input v-model="param.username" placeholder="username">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="password"
            v-model="param.password"
            @keyup.enter.native="submitForm()"
          >
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>

        <p class="login-tips"><a rel="nofollow"  href="https://www.youyacao.com/">CopyRight © 一颗优雅草科技</a><br><a rel="nofollow"  href="https://songshu.youyacao.com/video.html">松鼠短视频系统 v4.2.7</a>

		<br><a rel="nofollow"  href="https://doc.youyacao.com/web/#/17?page_id=185">技术接口</a>|<a rel="nofollow"  href="https://doc.youyacao.com/web/#/4?page_id=26">安装教程</a>

    <br><a rel="nofollow"  href="https://secop.yunaq.com/customer/api/v1/public/biz-opp/0/5a9f449545475e77a85657f6">创宇安全支持</a>|<a rel="nofollow"  href="https://partners.cloud.tencent.com/invitation/1000009941225fd73659498d2">腾讯云支持</a>

	   <br>
	   <a rel="nofollow"  href="https://gitee.com/youyacao/songshu-video-page">开源下载</a> |  <a rel="nofollow"  href="https://bbs.youyacao.com/thread-164-1-1.html">论坛下载</a>

    </p>

      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      param: {
        username: 'admin',
        password: '123123'
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      }
    }
  },
  created () {

  },
  methods: {
    submitForm () {
      this.$refs.login.validate(valid => {
        if (valid) {
          this.$api.login
            .login({
              username: this.param.username,
              password: this.param.password
            })
            .then(res => {
              if (res.code == 1) {
                this.$message.error('用户名或密码错误')
                return
              }
              this.$message.success('登录成功')
              localStorage.setItem('admin', JSON.stringify(res.data))
              this.$store.commit('setUser', res.data)
              this.$router.push('/')
            })
            .catch(res => {
              this.$message.error('用户名或密码错误')
              console.log('error', res)
            })
        } else {
          this.$message.error('请输入账号和密码')
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.jpg);
    background-size: 100%;
  }

  .ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
  }

  .ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
  }

  .ms-content {
    padding: 30px 30px;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
  }

  .login-tips {
    text-align: center;
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    a:link {
      color:#fff;
      text-decoration:none;
    }
    a:visited {
      color:#fff;
      text-decoration:none;
    }
    a:hover {
      color:#fff;
      text-decoration:none;
    }
    a:active {
      color:#fff;
      text-decoration:none;
    }
  }
</style>
